<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>外边距合并</title>
		<style>
			div#par ent{
				width: 300px;
				height: 300px;
				/*边框：内部空间--子元素加外边距*/
				border: 1px solid red;
				/*上框 加外边距*/
				mar gin-bottom: 80px;
			}
			div#s on {
				width: 100px;
				height: 100px;
				border: 1px solid red;
				/*下框 加外边距*/
				margin-top: 100px;
			}
			/*------------------【外部】外边距垂直合并问题：建议：加横向，不要加纵向
			                               方案：去掉一个最小值，加内边距
			
			----------------------*/
			div#parent{
				width: 300px;
				height: 300px;
				/*边框：内部空间--子元素加外边距*/
				bor der: 1px solid red;
				background-color: #aaffff;
				/*上外边距  40px*/
				margin-top: 98px;
				/*①添加溢出隐藏或者auto*/
				over flow:auto;
				/*②border：1像素透明边框*/
				border: 1px solid transparent;
			}
			div#son{
				width: 100px;
				height: 100px;
				background-color: #00ff00;
				/*上外边距  100px*/
				margin-top: 100px;
			}
			/*【内部垂直合并：最大值为主】--需要填充
			解决方法：①找到父元素，添加overflow：hidden[创建块级上下文，阻止外边距合并]
			        ②找到父元素，添加border或者padding-方向，建议：透明border
			*/
		</style>
	</head>
	<body>
		<div id="parent">
			<div id="son"></div>
		</div>		
	</body>
</html>